<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 5000px;
				position: relative;
			}
			p:nth-of-type(1){
				position: absolute;
				top: 0;
				left: 20%;
			}
			p:nth-of-type(2){
				position: absolute;
				bottom: 0;
				left: 20%;
			}
			div{
				width: 100px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				background: gray;
				position: fixed;
				bottom: 0;
				right: 0;
				display: none;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript" src="js/tween.js">
			
		</script>
	</head>
	<body>
			<p>12345</p>
			<p>67890</p>
			<div id="box">
				回到顶部
			</div>
	</body>
	<script type="text/javascript">
	function rocket(){
		var box = document.getElementById("box");
		//实现偏移量不为零的时候显示小火箭，为零的时候隐藏
		window.onscroll = function(){
			var nowTop = document.body.scrollTop || document.documentElement.scrollTop;
			if(nowTop > 600){
				box.style.display = "block";
			}else{
				box.style.display = "none";
			}
		}
		//点击小火箭实现回到顶部
	}
	box.onclick = function(){
		var top = document.body.scrollTop || document.documentElement.scrollTop;
		var t = 0;
		var b = top;
		var c = -top;
		var d = 30;
		var timer = setInterval(function(){
			t++;
			if(t >= d){
				clearInterval(timer);
			}	
			//考虑兼容性问题
			if(document.documentElement.scrollTop > 0){
				document.documentElement.scrollTop = Tween.Bounce.easeOut(t,b,c,d);
			}else{
				document.body.scrollTop  = Tween.Bounce.easeOut(t,b,c,d);
			}
		},40)
	}
	rocket();
	</script>
</html>
